import React, { useState } from "react";

import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";

import { useTranslation } from "react-i18next";
import { SecondTimer } from "./../../hooks/useTimer";
import Card from "@material-ui/core/Card";
import { useRequest } from "../../hooks/useRequest";
import { useStatusListener } from "./../../hooks/useStatusListener";
import { useParams } from "react-router-dom";
import { POST_RESEND_EMAIL_VERIFICATION } from "../../config/api";
import { useSnackbar } from "notistack";

const VerifyEmailSent = () => {
  const { t } = useTranslation();
  const [timerOff, setTimerOff] = useState(false);

  const { fetchData, state: requestState } = useRequest();
  const expireTime = new Date();
  expireTime.setSeconds(expireTime.getSeconds() + 5); // 30 seconds Timer

  const emailSvg = require("./../../assets/images/VerifyEmailSent/mail-sent.svg");
  const { enqueueSnackbar } = useSnackbar();

  const backgroundImage = require("./../../assets/images/LoginPage/backgroundImage.jpg");
  const logo = require("./../../assets/images/LoginPage/logo.svg");

  interface ParamTypes {
    email: string;
  }

  const { email }: ParamTypes = useParams();

  const handleResendMail = () => {
    console.log("......", email);
    const finalData = { email: email };
    fetchData(POST_RESEND_EMAIL_VERIFICATION, finalData);
    console.log("final Data --->", finalData);
  };
  const onSuccess = () => {
    setTimerOff(false);
    enqueueSnackbar(t("succeedMessage:verify-email-send"), {
      variant: "info",
      autoHideDuration: 3000,
    });
  };
  const onReject = () => {
    if (requestState.error?.message) {
    }
  };
  useStatusListener(requestState.status, onSuccess, onReject);

  return (
    <>
      <div className="app-wrapper min-vh-100 bg-white">
        <div className="app-inner-content-layout--main app-content p-0">
          <div className="bg-composed-wrapper--content flex-grow-1 w-100 d-flex align-items-center">
            <Grid container spacing={0} className="min-vh-100 ">
              <Grid item lg={5} xl={6} className="d-flex">
                <div className="background-gradient">
                  <img
                    src={backgroundImage}
                    alt="background"
                    className="background-image"
                  />
                  <div className="left-box-content">
                    <div className="greeting-box">
                      <img
                        src={logo}
                        alt="bitbine-logo"
                        className="logo-image"
                      />
                      <div className="greeting-text font-size-xxxl my-4">
                        {t("form:welcome-bitbine")}
                      </div>
                    </div>
                    <div className="left-box-bottom font-size-xxl mx-auto">
                      {t("form:form-desc")}
                    </div>
                  </div>
                </div>
              </Grid>
              <Grid
                item
                lg={7}
                xl={6}
                className="d-flex align-items-center singup-form"
              >
                <Grid
                  item
                  md={10}
                  lg={8}
                  xl={7}
                  className="mx-auto verify-email-container "
                >
                  <div className=" mt-2 card-header text-center font-weight-bold ">
                    {t("form:verify-email")}
                  </div>

                  <Card className="verify-email-card">
                    <div className="upper-box">
                      <img
                        className="mail-svg "
                        src={emailSvg}
                        alt="mail-svg"
                      />
                      <div className="card-title ">
                        {t("form:verify-email-sent")}
                      </div>
                    </div>
                    <div className=" text-black-60 card-desc font-size-lg text-center">
                      {t("form:email-sent-desc")}
                    </div>
                    {!timerOff && (
                      <div>
                        <SecondTimer
                          expiryTimestamp={expireTime}
                          onExpire={() => setTimerOff(true)}
                        />
                      </div>
                    )}
                    <div className="text-center submit-btn">
                      <Button
                        className="btn-primary  p-3 "
                        type="submit"
                        onClick={handleResendMail}
                        style={{ width: "40%" }}
                        disabled={!timerOff}
                      >
                        {t("form:resend-email")}
                      </Button>
                    </div>
                  </Card>
                  <div className="form-bottom">
                    <h6 className="terms">
                      <span className="mr-3">{t("form:terms")}</span>
                    </h6>
                    <h6 className="privacy ml-4">{t("form:privacy")}</h6>
                  </div>
                </Grid>
              </Grid>
            </Grid>
          </div>
        </div>
      </div>
    </>
  );
};

export default VerifyEmailSent;
